<nav role="navigation" aria-labelledby="search-results-title" class="w-full">
  <div class="filter-container search__filter">
    <div class="filter-search filter-container border-none mb-15 md:mb-8">
      <%= form_tag(decidim.search_path, method: :get) do %>
        <%= text_field_tag(
              :term,
              nil,
              id: "input-search-page",
              value: params[:term] || params.dig(:filter, :term),
              placeholder: t("decidim.search.term_input_placeholder"),
              title: t("decidim.search.term_input_placeholder"),
              "aria-label": t("decidim.search.term_input_placeholder")
            ) %>
        <button type="submit" aria-controls="results" aria-label="<%= t("decidim.search.term_input_placeholder") %>">
          <%= icon "search-line" %>
        </button>
      <% end %>
    </div>
    <button id="dropdown-trigger-search" data-controller="dropdown" data-target="dropdown-menu-search" data-auto-close="true" aria-expanded="true">
      <%= content_tag :span, t("decidim.searches.filters_small_view.filter_by"), class: "#{"is-active" if params.dig(:filter, :with_resource_type) == nil}" %>
      <% @blocks.each do |elements| %>
        <% elements.each do |type, results| %>
          <%= content_tag :span, class: "#{"is-active" if params.dig(:filter, :with_resource_type) == type}" do %>
            <span><%= searchable_resource_human_name(type) %></span>
          <% end %>
        <% end %>
      <% end %>
      <%= icon "arrow-down-s-line", class: "w-8 h-8 flex-none text-secondary fill-current" %>
      <%= icon "arrow-up-s-line", class: "w-8 h-8 flex-none text-secondary fill-current" %>
    </button>
    <ul id="dropdown-menu-search" aria-hidden="true">
      <li>
        <%= link_to main_search_path, class: "filter#{" is-active" if params.dig(:filter, :with_resource_type) == nil}", "aria-current": params.dig(:filter, :with_resource_type) == nil ? "true" : "" do %>
          <%= resource_type_icon("all") %>
          <span><%= t("all", scope: "decidim.searches.filters.state") %></span>
          <span class="label ml-auto"><%= @results_count %></span>
        <% end %>
      </li>
      <% @blocks.each do |elements| %>
        <li>
          <ul>
            <% elements.each do |type, results| %>
              <% if results[:count].positive? %>
                <li>
                <%= link_to search_path_by_resource_type(type), class: "filter#{" is-active" if params.dig(:filter, :with_resource_type) == type}", "aria-current": params.dig(:filter, :with_resource_type) == type ? "true" : "" do %>
                  <%= resource_type_icon(type) %>
                  <span><%= searchable_resource_human_name(type) %></span>
                  <span class="label ml-auto"><%= results[:count] %></span>
                <% end %>
                </li>
              <% else %>
                <%= content_tag :li, class: "filter#{" is-empty" if results[:count].zero?}" do %>
                  <%= resource_type_icon(type) %>
                  <span><%= searchable_resource_human_name(type) %></span>
                  <span class="label ml-auto"><%= results[:count] %></span>
                <% end %>
              <% end %>
            <% end %>
          </ul>
        </li>
      <% end %>
    </ul>
  </div>
</nav>
<script type="text/javascript">
  const button = document.querySelector('#dropdown-trigger-search');
  const arrowDown = button.querySelector('svg:first-of-type');
  const arrowUp = button.querySelector('svg:last-of-type');
  const list = document.querySelector('#dropdown-menu-search');
  // the arrow is up when user arrives on the page, with the list displayed
  arrowUp.addEventListener('click', function(){
    setTimeout(() => {
      button.setAttribute('aria-expanded', 'false');
      list.style.display = "none";
      }, 300)
  })
  arrowDown.addEventListener('click', function(){
    setTimeout(() => {
      button.setAttribute('aria-expanded', 'true');
      list.style.display = "block";
    }, 300)
  })
  // 32 is code for space bar and 13 is code for enter
  button.addEventListener('keydown', function(e){
    if ((e.keyCode === 13 || e.keyCode === 32) && button.getAttribute('aria-expanded') === 'true') {
      setTimeout(() => {
        button.setAttribute('aria-expanded', 'false');
        list.style.display = "none";
      }, 300)
    } else if ((e.keyCode === 13 || e.keyCode === 32) && button.getAttribute('aria-expanded') === 'false'){
        setTimeout(() => {
          button.setAttribute('aria-expanded', 'true');
          list.style.display = "block";
        }, 300)
    }
  })
</script>
